<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hplok高端备忘录引擎 - 手机版</title>
    <link rel="stylesheet" href="css/mobile-style.css">
</head>
<body>
    <div class="app-container">
        <header class="app-header">
            <h1>hplok备忘录</h1>
            <div class="header-actions">
                <button id="new-note-btn">+</button>
                <button id="settings-btn">⚙️</button>
            </div>
        </header>

        <main class="app-main">
            <div class="search-bar">
                <input type="text" placeholder="搜索备忘录...">
            </div>

            <div class="notes-list" id="notes-list">
                <!-- 备忘录列表将通过JS动态生成 -->
                <div class="note-card empty-state">
                    <p>暂无备忘录</p>
                    <p>点击右上角+创建新备忘录</p>
                </div>
            </div>
        </main>

        <div class="note-editor" id="note-editor">
            <div class="editor-toolbar">
                <button id="back-btn">←</button>
                <button id="save-note-btn">保存</button>
            </div>
            <div class="note-type-selector" id="note-type-selector">
                <h3>选择备忘录类型</h3>
                <div class="type-buttons">
                    <button class="type-btn" data-type="study">学习笔记</button>
                    <button class="type-btn" data-type="plan">计划笔记</button>
                    <button class="type-btn" data-type="schedule">课程表</button>
                    <button class="type-btn" data-type="quick">随手记</button>
                    <button class="type-btn" data-type="mind">思维笔记</button>
                </div>
            </div>
            <input type="text" class="note-title" placeholder="输入标题...">
            <textarea class="note-content" placeholder="输入内容..."></textarea>
        </div>
    </div>

    <div class="popup-overlay" id="dataWarningPopup">
        <div class="popup-content">
            <h3>数据存储提醒</h3>
            <p>由于本app为个人开发，经费不足，因此用户的所有数据保存在本地的浏览器当中，如果用户想要清理浏览器数据时，请用户备份好数据，本app不会对用户的数据负责，请用户自行承担数据的保管与内容管理，感谢配合，用户使用了本APP视为同意弹窗提醒</p>
            <button id="agreeBtn">我已了解并同意</button>
        </div>
    </div>

    <script src="js/mobile-app.js"></script>
    <style>
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        
        .popup-content {
            background-color: white;
            padding: 24px;
            border-radius: 12px;
            max-width: 90%;
            width: 300px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }
        
        .popup-content h3 {
            margin-bottom: 16px;
            color: #e74c3c;
            font-size: 18px;
        }
        
        .popup-content p {
            margin-bottom: 24px;
            line-height: 1.6;
            font-size: 14px;
        }
        
        #agreeBtn {
            width: 100%;
            padding: 12px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.2s;
        }
        
        #agreeBtn:hover {
            background-color: #2980b9;
        }
    </style>
    <script>
        // 数据存储警告弹窗逻辑
        document.addEventListener('DOMContentLoaded', function() {
            const popup = document.getElementById('dataWarningPopup');
            const agreeBtn = document.getElementById('agreeBtn');
            
            // 检查用户是否已同意
            if (localStorage.getItem('agreedToDataWarning')) {
                popup.style.display = 'none';
            }
            
            agreeBtn.addEventListener('click', function() {
                localStorage.setItem('agreedToDataWarning', 'true');
                popup.style.display = 'none';
            });
        });
    </script>
</body>
</html>